<!--耗材申领药品-->
<template>
  <div class="main-content-container">
    <div ref="search" style="padding-bottom: 10px">
      <div ref="tool" class="opt-tool operation-tool spn buttons">
        <el-button type="primary" plain icon="icon icon-add" @click="add">+申领</el-button>
      </div>
      <el-row class="mt10" type="flex">
        <Search :data="selections" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
        <el-form :model="searchForm" label-width="80px" :inline="true" style="margin-left: 10px">
          <el-select v-model="searchForm.deptType" class="el-select-y" placeholder="请选择领料类型" clearable @change="deptTypeChange">
            <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.label" />
          </el-select>
        </el-form>
      </el-row>
      <el-row class="mt10">
        <Tabs v-model="searchForm.deptStatus" :data="filtrateList" @change="datasChange" />
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table :loading="loading" :data="pageDatas" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="receiveCode" label="领取单号" :show-overflow-tooltip="true" />
        <el-table-column prop="deptType" label="领取类型" :show-overflow-tooltip="true" />
        <el-table-column prop="deptName" label="申请方" :show-overflow-tooltip="true" />
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="createdTime" label="申请时间" :show-overflow-tooltip="true" />
        <el-table-column prop="receiveUsr" label="申领人" :show-overflow-tooltip="true" />
        <el-table-column prop="warehouseName" label="仓库" :show-overflow-tooltip="true" />
        <el-table-column prop="deptStatus" label="领料状态" :show-overflow-tooltip="true" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detailsBtn(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
            <el-button v-if="scope.row.deptStatus === '待领取'" type="text" size="small" @click="deleteBtn(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <DeptGoodsDetials v-if="visibleDetails" :visible.sync="visibleDetails" :select-row="selectCustomersData" @handleClose="visibleDetails = false;" />
    <DeptGoods ref="addDialog" @success="getPageDatas" />
  </div>
</template>
<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import DeptGoodsDetials from "./deptGoodsDetails";
import DeptGoods from "./deptGoods";
import { tableColor, labelHeigh } from '@/utils/common.js';
import Tabs from "@/components/SearchSelection";
export default {
  components: {
    DeptGoods,
    DeptGoodsDetials,
    Search,
    Tabs,
  },
  data() {
    return {
      selections,
      tableColor,
      innerHeight: null,
      searchForm: {
        deptStatus: '待领取',
      },
      options: [{ id: 1, value: "科室领取", label: "科室领取" }, { id: 2, value: "代客领取", label: "代客领取" }],
      pageDatas: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      addData: {}, // 添加数据
      selectData: [],
      flag: true,
      title: "",
      testBtn: "",
      visible: false,
      visibleDetails: false,
      show: true,
      widths: 50,
      loading: false,
      filtrateList: [
        { id: '全部', name: '全部' },
        { id: '待领取', name: '待领取' },
        { id: '已领取', name: '已领取' },
        { id: '已取消', name: '已取消' },
      ],
      selectCustomersData: {},
    };
  },
  created() {
    this.getPageDatas();
  },
  mounted() {
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getPageDatas() {
      const searchForm = JSON.parse(JSON.stringify(this.searchForm));
      if (searchForm.deptStatus === "全部") searchForm.deptStatus = undefined;
      if (!searchForm.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        searchForm.timeType = "today";
        searchForm.createdTime = beginTime + "_" + endTime;
      }
      this.loading = true;
      const res = await this.$api['department/useDrugGoods/page']({ ...this.params, query: { ...searchForm }, Type: '耗材' });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.msg);
      this.pageDatas = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getPageDatas();
    },
    deptTypeChange() {
      this.params.page = 1;
      this.getPageDatas();
    },
    deptDrug(title) {
      this.show = true;
      this.visible = true;
      this.title = title;
    },
    add() {
      this.$refs.addDialog.openDialog({});
    },
    edit(row) {
      this.$refs.addDialog.openDialog(row);
    },
    // 搜索
    searchBtn() {
      this.getPageDatas();
    },
    // 详情
    async detailsBtn(row) {
      const res = await this.$api['department/useDrugGoods/details']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.selectCustomersData = res.data;
      this.widths = 70;
      this.visibleDetails = true;
    },
    // 取消
    async deleteBtn(row) {
      const confirmResult = await this.$confirm('请确认是否取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      const res = await this.$api['department/useDrugGoods/cancel']({ id: row.id });
      if (res.code !== 200) return this.$message.error('取消物品出入库失败！');
      this.$message.success('取消物品出入库成功！');
      this.getPageDatas();
    },
    handleDateChange(item) {
      this.params.page = 1;
      Object.assign(this.searchForm, item);
      this.getPageDatas();
    },
    handleTypeChange(item) {
      this.params.page = 1;
      Object.assign(this.searchForm, item);
      this.getPageDatas();
    },
    datasChange(item) {
      this.params.page = 1;
      this.$set(this.searchForm, 'deptStatus', item);
      this.getPageDatas();
    },
  },
};
</script>
<style scoped>
.opt-tool {
    float: right;
}
</style>
